<template>
  <el-select
    popper-class="lange-popper"
    :class="['lange-select', showPrefix ? '' : 'select-no-prefix']"
    filterable
    v-model="language_code"
    :placeholder="$t('formPlaceholder.select')"
    @change="languageChange"
  >
    <template slot="prefix" v-if="showPrefix">
      <img
        class="icon"
        src="https://cd.sealmg.com/assets/img/set-plane-lange.png"
        alt="https://cd.sealmg.com/assets/img/set-plane-lange.png"
        srcset=""
        loading="lazy"
      />
    </template>
    <el-option v-for="(val, key, index) in languageObj" :key="index" :label="val" :value="key"> </el-option>
  </el-select>
</template>
<script>
  export default {
    props: {
      showPrefix: {
        type: Boolean,
        default: () => true
      },
      languageCode: {
        type: String,
        default: ''
      },
      isSetData: {
        type: Boolean,
        default: () => true
      }
    },
    data() {
      return {
        language_code: this.languageCode,
        userSelect: {}
      }
    },
    watch: {
      languageCode: {
        handler(newVal) {
          this.language_code = newVal
        },
        deep: true,
        immated: true
      }
    },
    computed: {
      languageObj() {
        let language = {}
        if (this.$store && this.$store.state && this.$store.state.initData && this.$store.state.initData.language) {
          language = JSON.parse(JSON.stringify(this.$store.state.initData.language))
        }
        return language
      }
    },
    created() {
      let userSelect = this.$cookies.get('userSelect')
      if (userSelect && userSelect.language_code) {
        this.language_code = userSelect.language_code
        this.userSelect = userSelect
      }
    },
    methods: {
      languageChange(item) {
        if (this.isSetData) {
          // this.$i18n.setLocale(this.language_code);
          this.$store.commit('initData/setUserSelect', {
            ...this.userSelect,
            language_code: this.language_code
          })
          //this.$store.dispatch('initData/getInitData')
        }
        this.$emit('itemChange', item)
      }
    }
  }
</script>
<style lang="less" scoped>
  .lange-select {
    flex: 1;
    /deep/.el-input__prefix {
      .icon {
        width: 24px;
        height: 24px;
        margin-top: 8px;
      }
    }
  }
  .select-no-prefix {
    /deep/.el-input__inner {
      padding: 0 16px;
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
  }
  @media screen and (max-width: 767px) {
  }
</style>
